.wraper {
    box-sizing: border-box;
}

.wraper.pc {
    box-sizing: border-box;

    .bgbox {
        width: 100%;
        height: 480px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("/images/advantage01-pc.png");
        // filter: blur(5px);
    }

    .content {
        padding-bottom: 80px;

        &.content-1 {
            .items-wrap {
                padding-left: 80px;
                padding-bottom: 80px;
            }
        }

        &.content-2 {
            .items {
                gap: 20px;
            }

            .item {
                flex: 1;
                padding-left: 40px;
                padding-right: 40px;
            }
        }

        &.content-3 {
            .items {
                gap: 20px;
            }

            .item {
                flex: 1;
                padding-left: 32px;
                padding-right: 32px;
            }
        }

        &.content-4 {
            .items {
                gap: 20px;
            }

            .item {
                flex: 1;
                padding-left: 24px;
                padding-right: 24px;
            }
        }

        &.content-5 {
            .items {
                gap: 20px;

                &:last-child {
                    margin-top: 32px;
                    padding-left: 200px;
                    padding-right: 200px;
                }
            }

            .item {
                flex: 1;
                padding-left: 32px;
                padding-right: 32px;
            }
        }

        &.content-6 {
            .items {
                gap: 20px;

                &:last-child {
                    margin-top: 32px;
                }
            }

            .item {
                flex: 1;
                padding-left: 32px;
                padding-right: 32px;
            }
        }

        &.content-7 {
            .items {
                gap: 20px;

                &:last-child {
                    margin-top: 32px;
                    padding-left: 150px;
                    padding-right: 150px;
                }
            }

            .item {
                flex: 1;
                padding-left: 24px;
                padding-right: 24px;
            }
        }

        &.content-8 {
            .items {
                gap: 20px;

                &:last-child {
                    margin-top: 32px;
                }
            }

            .item {
                flex: 1;
                padding-left: 24px;
                padding-right: 24px;
            }
        }
    }

    .items-wrap {
        width: 1180px;
        margin-left: auto;
        margin-right: auto;
        padding: 54px 0 48px;
        margin-top: -300px;
        border-radius: 4px;
        background: #FFF;
        box-shadow: 0 4px 24px 0 #00000014;
    }

    .items {
        display: flex;
        flex-direction: row;
    }

    .item {
        box-sizing: border-box;

        &:hover {
            .icon-wrap {
                border-color: var(--design-theme-color) !important;
                background-color: var(--design-theme-color);
            }

            .icon {
                color: #FFF !important;
            }

            .title {
                color: var(--design-theme-color);
            }
        }
    }

    .icon-wrap {
        width: 120px;
        height: 120px;
        border-style: solid;
        border-width: 2px;
        border-radius: 50%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    .icon {
        font-size: 70px;
    }

    .title {
        margin-top: 32px;
        color: var(--render-text-color-main);
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
    }

    .desc {
        margin-top: 10px;
        color: var(--render-text-color-second);
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        line-height: 32px;
    }
}

.wraper.mobile {
    box-sizing: border-box;

    .bgbox {
        width: 100%;
        height: auto;
        aspect-ratio: 375 / 280;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("/images/advantage01-mobile.png");
        // filter: blur(3px);
    }

    .content {
        padding: 0 16px 40px;
        position: relative;
    }

    .items {
        margin-top: -200px;
        border-radius: 4px;
        background: #FFF;
        box-shadow: 0 0 12px 0 #00000014;
        padding: 10px 0 32px;
        display: flex;
        flex-flow: row wrap;
    }

    .item {
        padding: 30px 12px 24px;
        width: 50%;
        position: relative;

        &:nth-child(2n-1):last-child:not(:first-child) {
            width: 50%;
            margin: 0 auto;
        }

        &:nth-child(2n-1):last-child {
            width: 100%;
            margin: 0;
        }

        &:last-child {
            .line-bottom,
            .line-right {
                display: none;
            }
        }

        &:nth-child(2n-1):nth-last-child(2) {
            .line-bottom {
                display: none;
            }
        }
    }

    .line-bottom {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 80px;
        height: 1px;
        transform: translate(-50%, 0);
        background-color: var(--advantage01-border-color);
    }

    .line-right {
        position: absolute;
        top: 46px;
        right: 0;
        width: 1px;
        height: 120px;
        background-color: var(--advantage01-border-color);
    }

    .icon-wrap {
        width: 54px;
        height: 54px;
        border-style: solid;
        border-width: 2px;
        border-radius: 50%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    .icon {
        font-size: 32px;
    }

    .title {
        margin-top: 24px;
        color: var(--render-text-color-main);
        text-align: center;
        font-size: 18px;
        font-weight: 500;
        line-height: 18px;
    }

    .desc {
        margin-top: 10px;
        color: var(--render-text-color-second);
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        line-height: 28px;
    }
}
